<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>黑马商城首页</title>

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<style type="text/css">
 	  	 .image{width: 40px; height: 40px;float: right;margin-left: -40px;}
 	  
 	  	.tu	img{width: 80%; height: 40%;float: right;margin-left: -40px;}
 	  		
 	  	.peijian .main .content .remen{height:320px;}	
 	  	
 	  	.peijian .main {
		    background-color: white;
		    height: 320px;
		}
 	  	
 	     .spzt{font-size:34px;}
 	      
	 /* Make the image fully responsive */
	  .carousel-inner img {
	      width: 40px;
	      height:460px;
	    
	  }
			
</style>
</head>

<body>
	<div class="container-fluid">
		<!-- 加载头部加载 w   -->
		<div id="header"></div>

		<!-- 轮播图 -->
		<div class="container-fluid">
			<div id="carousel-example-generic" class="carousel slide"
				data-ride="carousel">
				<!-- 轮播图的中的小点 -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0"
						class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>
				<!-- 轮播图的轮播图片 -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="img/1.jpg">
						<div class="carousel-caption">
							<!-- 轮播图上的文字 -->
						</div>
					</div>
					<div class="item">
						<img src="img/2.jpg">
						<div class="carousel-caption">
							<!-- 轮播图上的文字 -->
						</div>
					</div>
					<div class="item">
						<img src="img/3.jpg">
						<div class="carousel-caption">
							<!-- 轮播图上的文字 -->
						</div>
					</div>
				</div>

				<!-- 上一张 下一张按钮 -->
				<a class="left carousel-control" href="#carousel-example-generic"
					role="button" data-slide="prev"> <span
					class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a> <a class="right carousel-control" href="#carousel-example-generic"
					role="button" data-slide="next"> <span
					class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>

		<!-- 热门商品 -->
		<div class="container-fluid">
			<div class="col-md-12">
				<h2>
					手机&nbsp;&nbsp;<img src="img/title2.jpg" />
				</h2>
				
				<div class="col-md-10">
					
					
	                
					
					<div class="peijian w">
						<div class="main center">
							<div class="content"> 
								
								
								<!-- jquery加载 -->
								<div id="xiaomi_shouji">
									
									
								
								<!-- 加载完毕 -->
								
								<div class="clear"></div>
							</div>		
						</div>	
					</div>	
					
	
	
	
				</div>
			</div>
			
		</div>
			
			
		
			
			


		<!-- 广告条 -->
		<div class="container-fluid">
			<img src="products/hao/ad.jpg" width="100%" />
		</div>

		<!-- 最新商品 -->
		<div class="container-fluid">
			<div class="col-md-12">
				<h2>
					平板&nbsp;&nbsp;<img src="img/title2.jpg" />
				</h2>
				
					<div class="col-md-10">
					
					
	                
					
					<div class="peijian w">
						<div class="main center">
							<div class="content"> 
								
								
								<!-- jquery加载 -->
								<div id="xiaomi_shouji2">
									
									
								
								<!-- 加载完毕 -->
								
								<div class="clear"></div>
							</div>		
						</div>	
					</div>	
					
	
	
	
				</div>
			</div>
			</div>
			
				
				
				
				
			</div>
		</div>
	</div>
	
	<!-- 加载尾部-->
	<div id="footer"></div>
	
	
</body>

</html>

<script src="https://www.layuicdn.com/layui/layui.all.js"></script>

<script type="text/javascript">
//加载头部
$.post('header.jsp',{},function(data){
	$("#header").html(data);
},'text');


//加载尾部
$.post('footer.jsp',{},function(data){
	$("#footer").html(data);
},'text');

</script>
<script type="text/javascript">
layui.use(['form','jquery'], function(){
	var $ = layui.jquery ;
	//发送ajax请求
	$.post('/heima/findGoodsCriteria',{},function(data){
		//console.log(data);
		
		//循环data得到数据
		var html = "" ;
		for(var i=0;i<data.length;i++){
			
			//拼接html
			var str = '<div class="remen fl">' ;
				str += '<div class="xinpin"><span>新品</span></div>' ;
				str += '<div class="tu"><a href=""><img src="'+data[i].gphoto+'"</a></div>';
				str += '<div class="miaoshu"><a href="">'+data[i].gname+'</a></div>' ;
				str += '<div class="jiage">'+data[i].gprice+'元</div>' ;
				str += '<div class="pingjia">372人评价</div>' ;
				str += '<div class="piao">';
				str += '<a href="">';
				str += '<span>发货速度很快！很配小米6！</span>';
				str += '<span>来至于mi狼牙的评价</span>';
				str += '</a></div></div>';
		   html+=str;
		}
			//将数据加载到div
	   $("#xiaomi_shouji").html(html);
	   $("#xiaomi_shouji2").html(html);
	},'json');
});
</script>

